<template>
  <el-tabs
    v-model="tabsValue"
    :tab-position="tabPosition"
    style="height: 100%"
    class="demo-tabs"
    @tab-change="handleChange"
  >
    <el-tab-pane
      v-for="item in tabList"
      :key="item.value"
      :name="item.value"
      :label="item.label"
    >
      <el-row>
        <el-col :span="6" v-for="itemNew in newList" :key="itemNew.uniquekey">
          <el-card
            style="margin: 20px 0px; max-width: 250px; cursor: pointer"
            @click.prevent="handleLink(itemNew.url)"
          >
            <template #header>
              <div
                class="card-header"
                style="font-size: 20px; font-weight: bold; color: #000"
              >
                <span>{{ itemNew.category }}</span>
              </div>
            </template>
            <div
              v-if="
                itemNew.thumbnail_pic_s &&
                itemNew.thumbnail_pic_s02 &&
                itemNew.thumbnail_pic_s03
              "
            >
              <p>{{ itemNew.title }}</p>
              <el-row style="margin-top: 20px">
                <el-col :span="8">
                  <el-image
                    style="height: 50px"
                    :src="itemNew.thumbnail_pic_s"
                    fit="cover"
                  />
                </el-col>
                <el-col :span="8">
                  <el-image
                    style="height: 50px; margin: 0px 10px"
                    :src="itemNew.thumbnail_pic_s02"
                    fit="cover"
                  />
                </el-col>
                <el-col :span="8">
                  <el-image
                    style="height: 50px"
                    :src="itemNew.thumbnail_pic_s03"
                    fit="cover"
                  />
                </el-col>
              </el-row>
            </div>
            <div
              v-else-if="
                itemNew.thumbnail_pic_s &&
                !itemNew.thumbnail_pic_s02 &&
                !itemNew.thumbnail_pic_s03
              "
              style="display: flex; align-items: center"
            >
              <p>{{ itemNew.title }}</p>
              <el-image :src="itemNew.thumbnail_pic_s" fit="cover" />
            </div>
            <div v-else>
              <p>{{ itemNew.title }}</p>
            </div>
            <template #footer>
              <div
                style="
                  font-size: 12px;
                  color: rgb(201 201 201);
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <el-tooltip :content="itemNew.author_name" placement="top">
                  <div>
                    {{
                      itemNew.author_name.length > 5
                        ? itemNew.author_name.substring(0, 5) + "..."
                        : itemNew.author_name
                    }}
                  </div>
                </el-tooltip>
                <div>{{ itemNew.date }}</div>
              </div>
            </template>
          </el-card>
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import type { TabsInstance } from "element-plus";
import { reqNewList } from "@/api/web/new";
import { ElMessage } from "element-plus";
const tabPosition = ref<TabsInstance["tabPosition"]>("left");
//top(推荐,默认)guonei(国内)guoji(国际)yule(娱乐)tiyu(体育)junshi(军事)keji(科技)caijing(财经)youxi(游戏)qiche(汽车)jiankang(健康)
const tabList = ref([
  {
    label: "推荐",
    value: "top",
  },
  {
    label: "国内",
    value: "guonei",
  },
  {
    label: "国际",
    value: "guoji",
  },
  {
    label: "娱乐",
    value: "yule",
  },
  {
    label: "体育",
    value: "tiyu",
  },
  {
    label: "军事",
    value: "junshi",
  },
  {
    label: "科技",
    value: "keji",
  },
  {
    label: "财经",
    value: "caijing",
  },
  {
    label: "游戏",
    value: "youxi",
  },
  {
    label: "汽车",
    value: "qiche",
  },
  {
    label: "健康",
    value: "jiankang",
  },
]);
const tabsValue = ref("top");
const newList = ref([] as any);
const page = ref(1);
const pageSize = ref(30);
const isFilter = ref(1);
onMounted(() => {
  initData();
});
const handleChange = () => {
  newList.value = [];
  initData();
};
const initData = async () => {
  const res = await reqNewList(
    tabsValue.value,
    page.value,
    pageSize.value,
    isFilter.value,
  );
  if (res.code === 200) {
    if (res.data) {
      newList.value = res.data;
    } else {
      ElMessage({
        type: "error",
        message: res.msg,
      });
    }
  } else {
    ElMessage({
      type: "error",
      message: res.msg,
    });
  }
};
const handleLink = (url: string) => {
  if (url) {
    window.open(url);
  }
};
</script>
<style scoped lang="scss"></style>
